<template>
    <div>
        <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
            <el-form-item label="余额" prop="Balance">
                <el-input
                    v-model="formData.Balance"
                    placeholder="请输入单行文本余额"
                    clearable
                    :style="{width: '100%'}"
                ></el-input>
            </el-form-item>
            <el-form-item label="保证金" prop="Bond">
                <el-input
                    v-model="formData.Bond"
                    placeholder="请输入单行文本保证金"
                    clearable
                    :style="{width: '100%'}"
                ></el-input>
            </el-form-item>
            <el-form-item label="基金等级" prop="Grade">
                <el-select
                    v-model="formData.Grade"
                    placeholder="请选择基金等级"
                    clearable
                    :style="{width: '100%'}"
                >
                    <el-option
                        v-for="(item, index) in GradeOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="社区等级" prop="CommunityLevel">
                <el-select
                    v-model="formData.CommunityLevel"
                    placeholder="请选择社区等级"
                    clearable
                    :style="{width: '100%'}"
                >
                    <el-option
                        v-for="(item, index) in CommunityLevelOptions"
                        :key="index"
                        :label="item.label"
                        :value="item.value"
                        :disabled="item.disabled"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="State">
                <el-switch v-model="formData.State" active-text="激活" inactive-text="未激活"></el-switch>
            </el-form-item>
            <el-form-item size="large">
                <el-button type="primary" @click="submitForm">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    components: {},
    props: [],
    data() {
        return {
            formData: {
                Balance: undefined,
                Bond: undefined,
                Grade: 1,
                CommunityLevel: 1,
                State: true,
            },
            rules: {
                Balance: [],
                Bond: [],
                Grade: [],
                CommunityLevel: [],
            },
            GradeOptions: [
                {
                    label: "A基金",
                    value: 1,
                },
                {
                    label: "B基金",
                    value: 2,
                },
                {
                    label: "C基金",
                    value: 3,
                },
            ],
            CommunityLevelOptions: [
                {
                    label: "八星社区",
                    value: 1,
                },
                {
                    label: "七星社区",
                    value: 2,
                },
                {
                    label: "六星社区",
                    value: 3,
                },
            ],
        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
        submitForm() {
            this.$refs["elForm"].validate((valid) => {
                if (!valid) return;
                // TODO 提交表单
            });
        },
        resetForm() {
            this.$refs["elForm"].resetFields();
        },
    },
};
</script>
<style>
</style>
